<script setup lang="ts">
    import { ref, provide } from 'vue' //导入vue函数
    import { useCart } from '@/stores/cart' //导入cart状态文件
    import type { TableInstance } from 'element-plus' //导入表格实例
    import { useRouter } from 'vue-router' //引入路由
    import { ElMessage } from 'element-plus' //导入消息框
    import CartPay from './CartPay.vue' //引入自定义组件 - 支付界面

    //创建路由实例
    const router = useRouter()

    //执行方法获得cartStore对象
    const cartStore = useCart()

    //定义表格实例
    const tableRef = ref<TableInstance>()

    //选中商品的总价
    const selectPrice = ref(0)

    //是否显示支付界面
    const isShowPay = ref(false)
    //通过provide实现跨组件通信
    provide("isShowPay", isShowPay) //支付组件是否显示

    //删除单个商品
    function delGoods(id:number){
        cartStore.delGoods(id)
    }

    //清空购物车
    function clearCart(){
        cartStore.clearCart()
    }

    //去购物
    function goShoping(){
        router.push("/")
    }

    //选中商品发生改变
    function changeGoodsInfo(){
        //计算选中商品的总价
        const selectGoods = tableRef.value?.getSelectionRows()
        selectPrice.value = 0
        for(var v of selectGoods){
            selectPrice.value += v.price * v.discount * v.num
        }
    }

    //下单结算
    function checkout(){
        //获得选中的商品
        const selectGoods = tableRef.value?.getSelectionRows()
        //判断选中状态
        if(selectGoods.length == 0){
            ElMessage.warning("请选择要购买的商品")
        }
        else{
            isShowPay.value = true
        }
    }
</script>

<template>

    <el-table ref="tableRef" :data="cartStore.cartList" class="cart_list" @selection-change="changeGoodsInfo">
        <!--空数据时显示内容-->
        <template #empty>
            <div class="cart_empty">
                <div></div>
                <div>
                    <div>购物车空空的哦~，去看看心仪的商品吧~</div>
                    <div><el-button type="primary" text @click="goShoping">去购物&gt;</el-button></div>
                </div>
            </div>
        </template>
        <!--有数据时的显示内容-->
        <el-table-column type="selection" width="100" align="center"></el-table-column>
        <el-table-column label="图片" width="200" align="center">
            <template #default="scope">
                <img :src="scope.row.picture" />
            </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column label="单价" width="150" align="center">
            <template #default="scope">
                <span>￥{{(scope.row.price * scope.row.discount).toFixed(2)}}</span>
            </template>
        </el-table-column>
        <el-table-column label="数量" width="200" align="center">
            <template #default="scope">
                <el-input-number v-model="scope.row.num" :min="1" :max="scope.row.stock" @change="changeGoodsInfo"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="小计" width="150" align="center">
            <template #default="scope">
                <span class="sub">￥{{(scope.row.price * scope.row.discount * scope.row.num).toFixed(2)}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
                <el-button type="primary" text @click="delGoods(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <section class="cart_bar">
        <div>共 {{ cartStore.cartList.length }} 件商品，已选择 {{ tableRef?.getSelectionRows().length }} 件，商品合计：<span>￥{{ selectPrice.toFixed(2) }}</span></div>
        <div>
            <el-popconfirm @confirm="clearCart" title="是否清空购物车？" confirm-button-text="确认" cancel-button-text="取消" width="160px">
                <template #reference>
                    <el-button type="danger" size="large">清空购物车</el-button>
                </template>
            </el-popconfirm>
            <el-button type="primary" size="large" @click="checkout">下单结算</el-button>
        </div>
    </section>

    <!--自定义组件 - 支付界面-->
    <CartPay :orderPrice="selectPrice" :selectGoods="tableRef?.getSelectionRows()"></CartPay>

</template>

<style scoped>
    .cart_list{
        border:1px solid #EBEEF5;
        width:1200px;
        margin:20px auto;
    }
    .cart_list img{
        width:100px;
        height: 100px;
    }
    .cart_list .sub{
        color:#CF4444;
        font-size: 15px;
    }
    .cart_bar{
        border:1px solid #EBEEF5;
        width:1200px;
        height:70px;
        margin:0px auto;
        display:flex;
        justify-content:space-between;
        align-items: center;
    }
    .cart_bar > div{
        margin:0px 30px;
    }
    .cart_bar > div > span{
        color:#CF4444;
        font-size: 20px;
        font-weight: bold;
    }
    .cart_empty{
        margin:30px auto;
    }
</style>
